<template>
    <div class="agent-container">
        <div class="search-box">
            <div class="search-box-sub">
              <span class="lable-text">{{$t('agent.firmName')}}</span>
              <el-input v-model="searchData.firmName" clearable></el-input>
            </div>
            <div class="search-box-sub">
              <span class="lable-text">{{$t('agent.firmType')}}</span>
              <el-select v-model="searchData.type" filterable clearable :placeholder="$t('pleaseSelect')">
                <el-option
                  v-for="item in typeList"
                  :key="item.value"
                  :label="item.code"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="search-box-sub">
              <span class="lable-text">{{$t('login.loginName')}}</span>
              <el-input v-model="searchData.loginName" clearable></el-input>
            </div>
            <div class="search-box-sub">
              <span class="lable-text">{{$t('email')}}</span>
              <el-input v-model="searchData.email" clearable></el-input>
            </div>
            <div class="search-box-sub">
              <el-button type="primary" @click='query' >{{$t('query')}}</el-button>
            </div>
        </div>
        <div class="button-box">
            <el-button type="primary" icon='el-icon-plus' v-show="userType!=4" @click="()=>{$store.commit('setVisibleAdd',true)}">{{$t('add')}}</el-button>
            <el-popconfirm
                :title="$t('index.delete_confirm')+'?'"
                :confirm-button-text="$t('sure')"
                :cancel-button-text="$t('cancel')"
                @confirm='deleteBatch()'
            >
                <el-button slot="reference" icon='el-icon-delete' v-show="userType!=4">{{$t('delete')}}</el-button>
            </el-popconfirm>
        </div>
        <baseTable v-loading="loading"  row-key='sid' :data="dataRows" border  stripe @selection-change="handleSelectionChange($event)"  :column='column' :select='true'>
            <template #type="{data}">
              {{returnTypeCode(data.type)}}
            </template>
            <template #option="{data}">
              <div class="option-box">
                <el-button size='small' type="primary" icon="el-icon-edit" :title="$t('edit')" @click='editUsers(data)'></el-button>
                <el-popconfirm
                    :title="$t('index.delete_item_confirm')+'?'"
                    @confirm='deleteSub(data.sid)'
                >
                    <el-button type="danger" slot="reference" icon='el-icon-delete' :title="$t('delete')" v-show="userType!=4"></el-button>
                </el-popconfirm>
                <el-button size='small' type="primary" icon="el-icon-user-solid" :title="$t('agent.accountMsg')" @click='showUser(data)'></el-button>
                <el-button size='small' type="primary" icon="el-icon-notebook-2" :title="$t('index.js_seeDetails')" @click='gotoUser(data)'></el-button>
                <!-- 姜群账号特殊功能，可直接跳转至里逆变器列表 -->
                <el-button size='small' type="primary" icon="el-icon-notebook-2" :title="$t('device.inverter')" v-show="data.visibleFlag==1"></el-button>
              </div>
            </template>
        </baseTable>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
        <addModal :selectCountryData='selectCountryData' @uploadPage='uploadPage' v-if='visibleAdd'></addModal>
        <editModal :selectCountryData='selectCountryData' :rowData='rowDataList' @uploadPage='uploadPage'></editModal>
        <infoModal :rowData='rowDataList' @uploadPage='uploadPage'></infoModal>
    </div>
</template>

<script>
import baseTable from '../../components/common/baseTable'
import addModal from './add.vue'
import editModal from './edit.vue'
import infoModal from './info.vue'
export default {
    components: {
        baseTable,
        addModal,
        editModal,
        infoModal
    },
    props: {

    },
    data() {
        return {
            searchData:{
                firmName:'',
                type:'',
                loginName:'',
                email:''
            },
            userType:JSON.parse(sessionStorage.getItem('userObj')).userType,
            typeList:[],
            selectCountryData:[],
            rowDataList:{},
            selectDatalist:[],
            loading:false,
            dataRows:[],
            column:[{
                title: this.$t('agent.firmName'),
                value: 'firmName',
            },{
                title: this.$t('agent.firmType'),
                value: 'type',
                slot: 'type',
                width:'100'
            },{
                title: this.$t('contact'),
                value: 'relation',
                slot: 'relation'
            },{
                title: this.$t('telphone'),
                value: 'telphone',
                slot: 'telphone',
                width:'120'
            },{
                title: this.$t('email'),
                value: 'email',
                slot: 'email'
            },{
                title: this.$t('createTime'),
                value: 'createTime',
                slot: 'createTime',
                min_width:'180'
            },{
                title: this.$t('control'),
                slot: 'option',
                width:'120'
            }],
            size:10,
            current:1,
            total:1,
        };
    },
    computed: {
        visibleAdd(){
            return this.$store.state.sysStore.visibleAdd
        }
    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.getDictionaryBatch();
        
        this.selectCountry()
    },
    methods: {
        async deleteSub(id){
            let res = await this.API.agentDeleteBatch({
                ids:id
            })
            if(res.success){
                this.$message.success(this.$t('index.control_success'))
            }else{
                this.$message.error(this.$t('index.control_fail'))
            }
            this.initTable()
        },
        async deleteBatch(){
            if(this.selectDatalist.length>0){
                let ids = this.selectDatalist.map(item => {
                    return item.sid
                })
                let res = await this.API.agentDeleteBatch({
                    ids
                })
                if(res.success){
                    this.$message.success(this.$t('index.control_success'))
                }else{
                    this.$message.error(this.$t('index.control_fail'))
                }
                this.initTable()
            }else{
                this.$message.error(this.$t('index.delete_select'))
            }
        },
        async getDictionaryBatch(){
            let res = await this.API.getDictionaryBatch({
                dictCodes:'FIRM_TYPE',
                lang:localStorage.getItem('lang')
            })
            this.typeList = res.FIRM_TYPE
            this.initTable()
        },
        async initTable(){
            this.loading = true
            let res = await this.API.getAgentTable({
                size: this.size,
                current: this.current,
                ...this.searchData
            })
            this.dataRows = res.rows || []
            this.total = res.total
            this.loading = false
        },
        async editUsers(data){
            let res = await this.API.getAgentDataById({
                    id:data.sid
                })
            this.$store.commit('setVisibleEdit',true)
            this.rowDataList = res
        },
        showUser(data){
            this.$store.commit('setVisibleInfo',true)
            this.rowDataList = data
        },
        gotoUser(data){
            this.$router.push({ path: '/userManagement', query: {
                    businessId: data.sid
                } 
            })
        },
        uploadPage(){
            this.initTable()
        },
        async selectCountry(){
            let res = await this.API.selectCountry()
            this.selectCountryData = res || []
        },
        returnTypeCode(val){
            let res
            this.typeList.forEach(item=>{
                if(val==item.value){
                    res = item.code
                }
            })
            return res
        },
        query(){
            this.current = 1
            this.initTable()
        },
        handleSelectionChange(val){
            this.selectDatalist = val
        },
        handleSizeChange(val) {
          this.size = val
          this.current = 1
          this.initTable()
        },
        handleCurrentChange(val) {
          this.current = val
          this.initTable()
        },
    },
};
</script>

<style lang="less">
.agent-container{
    font-size: 14px;
}

</style>
